<template>
  <!-- 报警信息-->
  <view class="pwd-retrieve-container">
    <view class="hidden-title">报警信息</view>
    <gather-detail-item v-if="isGather" :detail="detail" />
    <detail-item v-else :detail="detail" />
  </view>
</template>

<script>
import DetailItem from '@/pages/work/alarm-info/components/detailItem.vue'
import GatherDetailItem from '@/pages/work/alarm-info/components/gatherDetailItem.vue'
import { reqAggregationEventAlarmDetail, reqAlarmInformationDetail } from '@/api/alarm-info'

export default {
  components: {
    DetailItem,
    GatherDetailItem
  },
  data() {
    return {
      detail: {},
      isGather: false
    }
  },
  onLoad({ id, name, isGather }) {
    this.isGather = isGather === 'true'
    this.fetchDetail(id, name)
  },
  methods: {
    async fetchDetail(id, name) {
      if (this.isGather) {
        const event = await reqAggregationEventAlarmDetail(id)
        this.detail = event.data || {}
        this.detail.eventName = name
      } else {
        const info = await reqAlarmInformationDetail(id)
        this.detail = info.data
      }
    }
  }
}
</script>

<style lang="scss">
.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}
</style>
